<script>
  export default{
    name: 'HomeView'
  }
</script>

<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="welcome-card">
          <div slot="header">
            <span>仓储管理系统</span>
          </div>
          <div class="welcome-content">
            <h2>欢迎使用仓储管理系统</h2>
            <p>本系统提供完整的仓储业务管理功能，包括入库管理,出库管理和业务管理。</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top:20px; ">
      <el-col :span="8">
        <el-card class="module-card" @click.native="$router.push('/InBound')">
          <div class="module-icon">
            <i class="el-icon-upload"></i>
          </div>
          <div class="module-title">入库管理</div>
          <div class="module-desc">管理订单号、车牌号、入库件数、入库吨数、入库时间等信息</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="module-card" @click.native="$router.push('/OutBound')">
          <div class="module-icon">
            <i class="el-icon-download"></i>
          </div>
          <div class="module-title">出库管理</div>
          <div class="module-desc">管理提单号、出库件数、出库吨数、开船日等信息</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="module-card" @click.native="$router.push('/Business')">
          <div class="module-icon">
            <i class="el-icon-document"></i>
          </div>
          <div class="module-title">业务管理</div>
          <div class="module-desc">管理仓储费、剩余吨量等信息</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.home{
  padding: 20px;
}

.welcome-card{
  text-align: center;
}

.welcome-content h2{
  color: #409EFF;
  margin-bottom: 20px;
}

.welcome-content p{
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

.module-card{
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.module-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.module-icon{
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 15px;
}

.module-title{
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.module-desc{
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}
</style>


